import React, { memo, useEffect, useState } from "react";
import Scroll from '@/baseUI/scroll'
import { connect } from "react-redux";
import { useNavigate, Outlet } from "react-router-dom";
import * as actions from "./store/actionCreators"
import { FindStyle } from "./find.style"
import loading from '@/assets/Images/1.gif'
import loading2 from '@/assets/Images/loading.gif'
import Lazyload, { forceCheck } from 'react-lazyload'

const Find = (props) => {

    const navigate = useNavigate();

    let [page, setPage] = useState(1);
    // 获取状态
    const { findData } = props;
    // 获取方法
    const { getFindDatas, getDetailDatas } = props;

    const { active = [] } = findData;


    const [isLoading, setIsLoading] = useState(false);
    const { newLists = [] } = findData
    console.log(newLists);

    // 判断仓库是否为空，空则getFindDataDispatch()，page改变重新渲染页面
    useEffect(() => {
        if (!findData.length) {
            getFindDatas(page)
            setTimeout(() => {
                setIsLoading(false)
            }, 500)
        }
    }, [page])

    const goto = (id) => {
        navigate(`/find/${id}`);
    }
    // 上拉加载更多
    const handlePullUp = () => {
        if (isLoading) return;
        setPage(++page)
        setIsLoading(true)
    }

    // 下拉刷新
    const handlePullDown = () => {

    }
    const clickCard = (item) => {
        // console.log('111121');
        getDetailDatas(item);
        goto(item.id);
    }

    return (
        <FindStyle>
            {/* <div className="title">小鹏汽车</div> */}
            <Scroll
                direction="vertical" // 垂直滚动
                refresh={false} // 下拉更新为false
                pullUp={handlePullUp}
                pullDown={handlePullDown}
                onScroll={
                    () => {
                        setTimeout(() => {
                            forceCheck()
                        }, 500)
                    }
                }
            >
                <div className="container">
                    <div className="pic">
                        <img src="https://s.xiaopeng.com/xp-fe/mini/home/home-hot-1642147778.png" alt="" />
                        <div className="update">更新于：7小时前</div>
                    </div>

                    <div className="items">
                        {
                            newLists.map((item) => {
                                return (
                                    <div className="item" key={item.id} onClick={() => clickCard(item)}>
                                        <div className="piccontainer">
                                            <Lazyload
                                                height={100}
                                                placeholder={
                                                    <img width="100%" height="100%" src={loading} />
                                                }
                                            >
                                                <img src={item.picUrl} alt="" ></img>
                                            </Lazyload>
                                            <div className={item.id > 3 ? "topnumber" : `topnumber num${item.id}`} >TOP {item.id}</div>
                                        </div>
                                        <div className="commentcontainer">
                                            <div className="title"><div className="article">{item.title}</div></div>
                                            <div className="views">
                                                <div className="view">
                                                    <svg t="1644457515009" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1603" width="200" height="200"><path d="M512 460.8c30.72 0 51.2 20.48 51.2 51.2s-20.48 51.2-51.2 51.2-51.2-20.48-51.2-51.2 20.48-51.2 51.2-51.2m0-102.4c-87.04 0-153.6 66.56-153.6 153.6s66.56 153.6 153.6 153.6 153.6-66.56 153.6-153.6-66.56-153.6-153.6-153.6z" p-id="1604" fill="#bebab1"></path><path d="M517.12 296.96c168.96 0 286.72 133.12 337.92 204.8-51.2 71.68-168.96 204.8-337.92 204.8s-286.72-133.12-337.92-204.8c51.2-71.68 168.96-204.8 337.92-204.8m0-102.4c-296.96 0-460.8 307.2-460.8 307.2s158.72 307.2 460.8 307.2 460.8-307.2 460.8-307.2-163.84-307.2-460.8-307.2z" p-id="1605" fill="#bebab1"></path></svg>
                                                    <div className="viewnums">{Math.floor(Math.random() * 50 + 5)}</div>
                                                </div>
                                                <div className="share">
                                                    <div className="clickshare">
                                                        <svg t="1644457983425" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2482" width="200" height="200"><path d="M972.8 549.9136v294.7584A128.0768 128.0768 0 0 1 844.8 972.8H179.2a128 128 0 0 1-128-128V179.2c0-70.7328 57.1904-128 127.872-128h202.3168a25.6 25.6 0 0 0 0-51.2H179.072A179.072 179.072 0 0 0 0 179.2v665.6a179.2 179.2 0 0 0 179.2 179.2h665.6c98.944 0 179.2-80.2816 179.2-179.328V549.9136a25.6 25.6 0 0 0-51.2 0z" p-id="2483" fill="#99968e"></path><path d="M960 128c-353.4592 0-640 286.5408-640 640a25.6 25.6 0 0 0 51.2 0c0-325.1968 263.6032-588.8 588.8-588.8a25.6 25.6 0 0 0 0-51.2z" p-id="2484" fill="#99968e"></path><path d="M720.1024 62.1568l256 102.4a25.6 25.6 0 0 0 18.9952-47.5136l-256-102.4a25.6 25.6 0 0 0-18.9952 47.5136z" p-id="2485" fill="#99968e"></path><path d="M808.8064 348.4672l194.6368-189.312a25.6 25.6 0 1 0-35.6864-36.7104L773.12 311.7568a25.6 25.6 0 1 0 35.6864 36.7104z" p-id="2486" fill="#99968e"></path></svg>
                                                        <div className="sharename">分享</div>
                                                    </div>
                                                    <div className="goods">
                                                        <svg t="1644543439944" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2096" width="200" height="200"><path d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z" p-id="2097" fill="#99968e"></path></svg>
                                                        <div className="goodnums">{Math.floor(Math.random() * 10)}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </Scroll>
            <div className={isLoading ? 'pullUpLoading' : ''}>
                <img src={loading2} />
            </div>
            <Outlet />
        </FindStyle>
    )

}
const mapStateToPorps = (state) => {
    return {
        findData: state.find.findData
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        getFindDatas(page) {
            dispatch(actions.getFindData(page))
        },
        getDetailDatas(item) {
            dispatch(actions.getDetailCreate(item))
        }
    }
}

export default connect(mapStateToPorps, mapDispatchToProps)(memo(Find))
